这里要说一下，本篇我重点说的是上传，至于下载，查看对应的下载篇
在原来，文件的上传是使用form表单去提交，有的时候为了上传文件，还要专门为上传文件写一个form表单上传文件，十分的麻烦，探索宇宙已经很累了，哪有时间浪费啊！！^_^
正式进入主题
先看看怎么从html页面中发送文件，回答是：使用 FormData
FormData使用h5新添加的一个对象，可以用来包装要发送的数据，一个例子
<body>
<form>
<label for="">上传文件</label>
<input type="file" id="picture" />
<input type="button" value="确认提交" onclick="confirm()">
</form>
<script>
function confirm(e){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//构造FormData对象
var formData = new FormData();
//添加非文件数据
formData.append("username","123456");
formData.append("password","67890");
//添加文件数据
formData.append("picture",document.getElementById("picture").files[0])
//使用POST方法发送数据
xmlHttp.open("POST","/imageUpload",true);
xmlHttp.send(formData)
//返回的数据
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 && xmlHttp.status==200){
console.log(xmlHttp.responseText);
}
}
}
</script>
</body>如上所述，你就已经发送了
{
username:123456,
password:67890,
picture:文件数据(其实这里是将文件转换为二进制了)
}我们可以看见使用FormData添加数据非常的简单，特别是解决了在上传文件只能使用form表单的憋屈。
下面我要说说，使用FormData包装好的数据怎么传输的，我想这是非常有必要的，特别是当你在后端解析数据的时候，必须要知道传给后台的数据长什么样
使用FormData后，会将request的Content-Type设置为
“multipart/form-data;boundary=----"+一段随机的字母;上面的boundary正如字面的意思一样，就是一个分界的意思，分开每一个键值对数据，具体的数据格式为
--boundary(换行)
Content-Disposition:form-data;name=“数据的键”(换行)
\r\n(换行)
数据的值(“换行”)注意每一个boundary的前面要加两个“－”
对于文件的数据格式为:
—boundary(换行)
Content-Disposition:form-data;name=“数据的键”;filename=“文件名”(换行)
\r\n
Content-Type:*/*(换行)
\r\n
文件的二进制编码用我们前面的例子，发送的数据为:
--boundary
Content-Disposition:form-data;name="username"
\r\n
123456
--boundary
Content-Disposition:form-data;name="password"
\r\n
67890
--boundary
Content-Disposition:form-data;name="picture";filename="上传的文件名"
\r\n
Content-Type:image/jpeg;
对图片进行二进制编码后的数据
--boundary--上面的boundary是一个变量，可以是一串随机数,不过FormData默认是四个"-"加一串随机数。
在最后也要添加一个分界，不一样的是在分界的前后各加了两个"-",表示数据发送完毕。
至此上传篇结束了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。